<style>
	/**weui-uploader**/
.weui-uploader-box{padding: 10px; margin-top: 5px; background-color: #fff;}
.weui-uploader__hd {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    padding-bottom: 10px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    display: none;
}

.weui-uploader__title {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}

.weui-uploader__info {
    color: #B2B2B2;
}
.weui-uploader__bd {
    margin-bottom: -4px;
    margin-right: -9px;
    overflow: hidden;
}
.weui-uploader__files {
    list-style: none;
    float: left;
}
.weui-uploader__files:after{clear: both; content: "."; visibility: hidden; height: 0px;}
.weui-uploader__file {
    float: left;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 79px;
    height: 79px;
    background: no-repeat center center;
    background-size: cover;
}

.weui-uploader__input-box {
    float: left;
    position: relative;
    margin-right: 9px;
    margin-bottom: 9px;
    width: 77px;
    height: 77px;
    border: 1px solid #D9D9D9;
}
.weui-uploader__input-box:before {
    width: 2px;
    height: 39.5px;
}

.weui-uploader__input {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.weui-cells_form input, .weui-cells_form textarea, .weui-cells_form label[for] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.weui-uploader__input-box:before, .weui-uploader__input-box:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #D9D9D9;
}
.weui-uploader__input-box:after {
    width: 39.5px;
    height: 2px;
}

.weui-uploader__file-content {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #FFFFFF;
}

.weui-gallery {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000000;
    z-index: 1000;
}

.weui-gallery__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 60px;
    left: 0;
    background: center center no-repeat;
    background-size: contain;
}

.weui-gallery__opr {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #0D0D0D;
    color: #FFFFFF;
    line-height: 60px;
    text-align: center;
}
.weui-gallery__del {
    display: block;
     color: #FFFFFF;
    font-size: 22px;
    text-align: center;
    text-decoration: none;
}
.weui-gallery__opr {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #0D0D0D;
    color: #FFFFFF;
    line-height: 60px;
    text-align: center;
}
.weui-icon-delete.weui-icon_gallery-delete {
    color: #FFFFFF;
    font-size: 22px;
}
</style>
<div class="weui-uploader-box" >
	<div class="weui-gallery" id="uploader-gallery" >
            <span class="weui-gallery__img" id="uploader-galleryImg"></span>
            <div class="weui-gallery__opr">
                <a href="javascript:" id="uploader-gallerdel" class="weui-gallery__del">
                    		删除
                </a>
            </div>
        </div>
			 <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title">图片上传</p>
                         
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
                               	{foreach item=c from=$imgsdata}
                               	<li class="weui-uploader__file" v="{$c.imgurl}" trueimg="{$c.imgurl|images_site}" did="{$c.id}" style="background-image:url({$c.imgurl|images_site}.100x100.jpg)"></li>
                               	{/foreach}
                            </ul>
                            <div class="weui-uploader__input-box">
                                <input id="uploaderInput" class="weui-uploader__input" type="file"  multiple="">
                            </div>
                        </div>
                    </div>
		</div> 
<script src="/plugin/lrz/lrz.bundle.js"></script>		
<script>
	var upgaller;
	/*引用参数设置
	var uploader_object_id,uploader_tablename;
	*/
	 
	var tmpl = '<li class="weui-uploader__file" v="#v#" did="#did#" trueimg="#trueimg#" style="background-image:url(#url#)"></li>';
	$(document).on("change","#uploaderInput", function(e){
            var src, url = window.URL || window.webkitURL || window.mozURL, files = e.target.files;
            for (var i = 0, len = files.length; i < len; ++i) {
                var file = files[i];

                if (url) {
                    src = url.createObjectURL(file);
                } else {
                    src = e.target.result;
                }
				lrz(file,{width:1024}) .then(function(rst){
					 
					$.post(SITE+"/index.php?m=upload&a=base64",
					{
						content:rst.base64,
						tablename:uploader_tablename,
						object_id:uploader_object_id,
						inimgs:1,
					},
					function(data){
						//console.log(data);		 
						$("#uploaderFiles").append($(tmpl.replace("#trueimg#",data.trueimgurl).replace("#did#",data.imgid).replace("#v#",data.imgurl).replace('#url#', data.trueimgurl+".100x100.jpg")));
					},"json")
				})
				.catch(function(err){
					console.log(err)
				})
                
            }
        });
    $(document).on("click",".weui-uploader__file",function(){
    	upgaller=$(this);
    	$("#uploader-galleryImg").css({"background-image":"url("+$(this).attr("trueimg")+")"});
    	$("#uploader-gallery").show();
    });
    $(document).on("click","#uploader-gallery",function(){
    	$(this).hide();
    });
    
    $(document).on("click","#uploader-gallerdel",function(){
    	var id=upgaller.attr("did");
    	$.get(SITE+"/index.php?m=imgs&a=delete&id="+id,function(data){
    		upgaller.remove();
    	},"json")
    	
    })
</script>